<template>
  <scroll-view scroll-y class="lottery-game">
    <!-- 返回按钮 -->
    <view class="back-button" @tap="goBack">
      <text class="back-icon">←</text>
      <text class="back-text">返回</text>
    </view>
    
    <!-- 知乎问题链接 -->
    <view class="zhihu-link-section">
      <text class="zhihu-link">
        知乎问题："稳定的200万 vs 99%的2亿，你会如何选择？"
      </text>
    </view>

    <view class="container">
      <text class="title">🎰 风险抉择抽奖</text>
      <text class="game-intro">用概率验证你的决策：博弈2亿 VS 稳定200万</text>

      <!-- 用户名输入区 -->
      <view class="username-section">
        <text class="username-label">请输入你的名字：</text>
        <input 
          v-model="userName" 
          type="text" 
          class="username-input"
          placeholder="例如：张三"
          maxlength="6"
        />
        <text class="username-hint">名字将用于记录和排行榜统计（留空则显示为"匿名用户"）</text>
      </view>

      <!-- 方案说明 -->
      <view class="plan-section">
        <view class="plan-comparison">
          <view class="plan-card safe">
            <view class="plan-icon">🛡️</view>
            <text class="plan-title">方案A：稳定方案</text>
            <text class="plan-rate">100%</text>
            <text class="plan-amount">200万</text>
            <text class="plan-expected">期望值：200万</text>
          </view>
          
          <text class="vs-divider">VS</text>
          
          <view class="plan-card risky">
            <view class="plan-icon">🎲</view>
            <text class="plan-title">方案B：博弈方案</text>
            <text class="plan-rate">99%</text>
            <text class="plan-amount">2亿</text>
            <text class="plan-fail">1% 获得 0元</text>
            <text class="plan-expected">期望值：1.98亿</text>
          </view>
        </view>

        <view class="plan-note">
          💡 选择方案B进行抽奖，看看你能否战胜概率！
        </view>
      </view>

      <!-- 次数选择 -->
      <view class="times-section">
        <view class="times-buttons">
          <view 
            v-for="times in [10000, 1000, 100, 10, 1]" 
            :key="times"
            @tap="selectAndStartLottery(times)"
            :class="['times-btn', { active: selectedTimes === times && isRunning, disabled: isRunning }]"
          >
            <text>{{ times === 1 ? '单次' : times + '次' }}抽奖</text>
          </view>
        </view>
      </view>

      <!-- 抽奖进行中 -->
      <view class="running-section" v-if="isRunning">
        <view class="progress-indicator">
          <view class="spinner"></view>
          <text>正在进行第 <text class="progress-text">{{ currentRound }}</text> / {{ selectedTimes }} 次抽奖...</text>
        </view>
      </view>

      <!-- 结果展示区（在下方显示） -->
      <view class="result-section" v-if="showResult && !isRunning">
        <!-- 单次结果 -->
        <view v-if="selectedTimes === 1 && results[0]" class="single-result">
          <view :class="['result-card', results[0].win ? 'win' : 'lose']">
            <view class="result-icon">{{ results[0].win ? '🎉' : '😢' }}</view>
            <text class="result-status">{{ results[0].win ? '恭喜中奖！' : '很遗憾...' }}</text>
            <text class="result-amount">{{ formatMoney(results[0].amount) }}</text>
            <text class="result-desc">
              {{ results[0].win ? '恭喜中奖！方案B：你获得了 ' + formatMoney(results[0].amount) + '！' : '方案B：这次没有中奖（0元）' }}
            </text>
          </view>

          <!-- 对比分析 -->
          <view class="comparison-box">
            <text class="comparison-title">📊 与稳定方案对比</text>
            <view class="comparison-grid">
              <view class="comparison-item">
                <text class="label">方案A（稳定）：</text>
                <text class="value safe">200万</text>
              </view>
              <view class="comparison-item">
                <text class="label">方案B（本次）：</text>
                <text :class="['value', results[0].win ? 'risky-win' : 'risky-lose']">
                  {{ formatMoney(results[0].amount) }}
                </text>
              </view>
              <view class="comparison-item highlight">
                <text class="label">差异：</text>
                <text :class="['value', results[0].amount >= 2000000 ? 'positive' : 'negative']">
                  {{ formatDifference(results[0].amount - 2000000) }}
                </text>
              </view>
            </view>
          </view>
          
          <!-- 分享按钮（单次） -->
          <view class="share-section">
            <button class="share-btn" open-type="share" @tap="prepareShare">
              🎉 一键分享结果
            </button>
          </view>
        </view>

        <!-- 多次结果 -->
        <view v-else class="multiple-results">
          <!-- 统计面板 -->
          <view class="stats-panel">
            <view class="stat-card total">
              <text class="stat-label">方案B总收益</text>
              <text class="stat-value gold">{{ formatMoney(totalAmountB) }}</text>
            </view>
            <view class="stat-card">
              <text class="stat-label">成功次数</text>
              <text class="stat-value success">{{ winCount }} / {{ selectedTimes }}</text>
            </view>
            <view class="stat-card">
              <text class="stat-label">失败次数</text>
              <text class="stat-value lose">{{ loseCount }} / {{ selectedTimes }}</text>
            </view>
            <view class="stat-card">
              <text class="stat-label">实际成功率</text>
              <text class="stat-value">{{ winRate }}%</text>
            </view>
            <view class="stat-card">
              <text class="stat-label">失败率</text>
              <text class="stat-value">{{ loseRate }}%</text>
            </view>
          </view>

          <!-- 对比分析 -->
          <view class="comparison-box">
            <text class="comparison-title">📊 与稳定方案对比</text>
            <view class="comparison-grid">
              <view class="comparison-item">
                <text class="label">方案A总收益（稳定）：</text>
                <text class="value safe">{{ formatMoney(totalAmountA) }}</text>
              </view>
              <view class="comparison-item">
                <text class="label">方案B总收益（实际）：</text>
                <text :class="['value', totalAmountB > totalAmountA ? 'risky-win' : 'risky-lose']">
                  {{ formatMoney(totalAmountB) }}
                </text>
              </view>
              <view class="comparison-item highlight">
                <text class="label">方案B vs 方案A差异：</text>
                <text :class="['value', totalAmountB >= totalAmountA ? 'positive' : 'negative']">
                  {{ formatDifference(totalAmountB - totalAmountA) }}
                </text>
              </view>
            </view>
            
            <view class="comparison-conclusion">
              <text v-if="totalAmountB > totalAmountA" class="conclusion-text win">
                🎊 恭喜中奖！方案B本次收益 <text class="strong">超过</text> 方案A {{ formatMoney(totalAmountB - totalAmountA) }}
              </text>
              <text v-else class="conclusion-text lose">
                😔 遗憾！方案B本次收益 <text class="strong">低于</text> 方案A {{ formatMoney(totalAmountA - totalAmountB) }}
              </text>
            </view>
          </view>
          
          <!-- 分享按钮 -->
          <view class="share-section">
            <button class="share-btn" open-type="share" @tap="prepareShare">
              🎉 一键分享结果
            </button>
          </view>
        </view>
      </view>
      
      <!-- 排行榜区域 -->
      <view class="ranking-section">
        <text class="ranking-title">🏆 排行榜 - {{ lotteryTimesLabel || '单次抽奖' }}</text>
        <text class="ranking-subtitle">当前抽奖次数下方案B总收益最高的前10名</text>
        
        <view v-if="rankings.length === 0" class="ranking-empty">
          <text>暂无排行数据，快来创造第一个记录吧！</text>
        </view>
        
        <view v-else class="ranking-table-wrapper">
          <view class="ranking-table">
            <view class="ranking-header">
              <text class="rank-col">排名</text>
              <text class="name-col">用户名</text>
              <text class="amount-col">方案B总收益</text>
              <text class="win-col">成功/失败</text>
              <text class="date-col">记录时间</text>
            </view>
            <view 
              v-for="(record, index) in rankings" 
              :key="record.id"
              :class="['ranking-row', { 'top-three': index < 3 }]"
            >
              <view class="rank-col">
                <text :class="['rank-badge', getRankClass(index)]">
                  {{ index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : index + 1 }}
                </text>
              </view>
              <text class="name-col">{{ record.userName || '匿名用户' }}</text>
              <text class="amount-col">{{ formatMoney(record.totalAmountB) }}</text>
              <view class="win-col">
                <text class="win-count">{{ record.winCount }}</text>
                <text class="separator">/</text>
                <text class="lose-count">{{ record.loseCount }}</text>
              </view>
              <text class="date-col">{{ formatDate(record.timestamp) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部公众号 -->
    <view class="author-footer">
      <text class="official-account-link" @tap="openOfficialAccount">
        关注公众号
      </text>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, inject } from 'vue';
import { insertLotteryRanking, getLotteryRankingByTimes, type LotteryRankingRecord } from '@/services/rankingService';

const emit = defineEmits(['go-back']);

// 注入父组件的分享数据更新函数
const updateShareData = inject<(title: string, path: string) => void>('updateShareData');

// 用户名（默认空字符串，提交时如果为空则使用"匿名用户"）
const userName = ref('');
const selectedTimes = ref(10000); // 默认10000次，与排行榜默认显示一致
const isRunning = ref(false);
const showResult = ref(false);
const currentRound = ref(0);
const results = ref<Array<{ win: boolean; amount: number }>>([]);

// 排行榜数据
const rankings = ref<LotteryRankingRecord[]>([]);

// 计算属性
// 方案B（博弈）的统计
const winCount = computed(() => {
  return results.value.filter(r => r.win).length;
});

const loseCount = computed(() => {
  return results.value.filter(r => !r.win).length;
});

const totalAmountB = computed(() => {
  return results.value.reduce((sum, r) => sum + r.amount, 0);
});

const winRate = computed(() => {
  if (results.value.length === 0) return '0.0';
  return ((winCount.value / results.value.length) * 100).toFixed(1);
});

const loseRate = computed(() => {
  if (results.value.length === 0) return '0.0';
  return ((loseCount.value / results.value.length) * 100).toFixed(1);
});

// 方案A（稳定）的总收益
const totalAmountA = computed(() => {
  // 方案A：100% * 200万 * 次数
  return 2000000 * selectedTimes.value;
});

// 获取抽奖次数标签
const lotteryTimesLabel = computed(() => {
  const labels: Record<number, string> = {
    1: '单次抽奖',
    10: '10次抽奖',
    100: '100次抽奖',
    1000: '1000次抽奖',
    10000: '10000次抽奖'
  };
  return labels[selectedTimes.value] || '';
});

onMounted(() => {
  // 组件加载时，默认加载10000次抽奖的排行榜
  loadRankings(10000);
});

watch(selectedTimes, (newTimes) => {
  // 监听抽奖次数变化，重新加载排行榜
  if (newTimes) {
    loadRankings(newTimes);
  }
});

function goBack() {
  emit('go-back');
}

function openOfficialAccount() {
  // 跳转到公众号主页，静默处理错误
  uni.openOfficialAccountProfile({
    username: 'gh_ab75ef78354d',
    success: () => {
      console.log('成功打开公众号主页');
    },
    fail: (err: any) => {
      console.error('打开公众号失败:', err);
      // 不显示任何提示
    }
  });
}

// 加载排行榜数据
async function loadRankings(times: number) {
  console.log('===== 开始刷新风险抉择抽奖排行榜 =====');
  console.log('抽奖次数:', times || selectedTimes.value);
  try {
    const result = await getLotteryRankingByTimes(times || selectedTimes.value || 1, 10);
    console.log('排行榜API返回结果:', result);
    if (result.success) {
      rankings.value = result.data.records;
      console.log('✅ 排行榜已更新，记录数:', rankings.value.length);
    } else {
      console.error('❌ 排行榜刷新失败:', result.message);
    }
  } catch (error) {
    console.error('❌ 加载风险抉择抽奖排行榜异常:', error);
  }
}

// 保存记录到排行榜
async function saveToRanking() {
  if (!selectedTimes.value || results.value.length === 0) {
    console.warn('没有抽奖结果，跳过保存');
    return;
  }
  
  const recordData = {
    userName: userName.value.trim() || '匿名用户',
    lotteryTimes: selectedTimes.value.toString(),
    lotteryTimesLabel: lotteryTimesLabel.value,
    totalAmountB: totalAmountB.value,
    winCount: winCount.value,
    loseCount: loseCount.value,
    winRate: parseFloat(winRate.value)
  };
  
  console.log('===== 准备保存风险抉择抽奖数据 =====');
  console.log('数据内容:', JSON.stringify(recordData, null, 2));
  
  try {
    console.log('>>> 开始POST插入记录到后端...');
    const result = await insertLotteryRanking(recordData);
    console.log('<<< POST请求返回结果:', result);
    
    if (result.success) {
      console.log('✅ 风险抉择抽奖记录已成功保存到排行榜');
      
      // 延迟一小段时间确保后端数据已经写入
      await new Promise(resolve => setTimeout(resolve, 300));
      
      // 强制重新加载排行榜（GET请求）
      console.log('>>> 开始GET请求刷新排行榜...');
      await loadRankings(selectedTimes.value);
      console.log('<<< 排行榜刷新完成');
    } else {
      console.error('❌ 保存失败:', result.message);
    }
  } catch (error) {
    console.error('❌ 保存风险抉择抽奖记录异常:', error);
  }
}

// 格式化日期显示
function formatDate(isoString: string): string {
  const date = new Date(isoString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}`;
}

// 获取排名样式类
function getRankClass(index: number): string {
  if (index === 0) return 'rank-first';
  if (index === 1) return 'rank-second';
  if (index === 2) return 'rank-third';
  return '';
}

async function selectAndStartLottery(times: number) {
  if (isRunning.value) return;
  
  selectedTimes.value = times;
  showResult.value = false;
  results.value = [];
  
  // 立即开始抽奖
  await startLottery();
}

async function startLottery() {
  isRunning.value = true;
  showResult.value = false;
  results.value = [];
  currentRound.value = 0;

  // 先快速计算所有抽奖结果（不延迟）
  for (let i = 0; i < selectedTimes.value; i++) {
    const result = performSingleLottery();
    results.value.push(result);
  }

  // 根据抽奖次数设置动画时长
  let animationDuration = 0;
  if (selectedTimes.value === 1) {
    animationDuration = 0; // 单次立即完成
  } else if (selectedTimes.value === 10) {
    animationDuration = 500; // 500ms
  } else if (selectedTimes.value === 100) {
    animationDuration = 1000; // 1s
  } else if (selectedTimes.value === 1000) {
    animationDuration = 1500; // 1.5s
  } else if (selectedTimes.value === 10000) {
    animationDuration = 2000; // 2s
  }

  // 如果有动画时间，则播放进度动画
  if (animationDuration > 0) {
    const updateInterval = 50; // 每50ms更新一次进度
    const totalSteps = animationDuration / updateInterval;
    
    for (let step = 1; step <= totalSteps; step++) {
      currentRound.value = Math.floor((step / totalSteps) * selectedTimes.value);
      await sleep(updateInterval);
    }
  }
  
  currentRound.value = selectedTimes.value; // 确保显示最终数字

  isRunning.value = false;
  
  // 显示结果
  await sleep(100);
  showResult.value = true;
  
  // 保存记录到排行榜
  await saveToRanking();
}

function performSingleLottery() {
  // 方案B：99%获得2亿，1%获得0
  const random = Math.random();
  if (random < 0.99) {
    return {
      win: true,
      amount: 200000000 // 2亿
    };
  } else {
    return {
      win: false,
      amount: 0
    };
  }
}

function formatMoney(amount: number): string {
  if (amount === 0) return '0元';
  
  if (amount >= 100000000) {
    const value = amount / 100000000;
    // 去掉小数部分的.00，只有非零小数才显示
    return value % 1 === 0 ? value.toFixed(0) + '亿元' : value.toFixed(2) + '亿元';
  } else if (amount >= 10000) {
    return (amount / 10000).toFixed(0) + '万元';
  } else {
    return amount.toFixed(0) + '元';
  }
}

function formatDifference(diff: number): string {
  const prefix = diff >= 0 ? '+' : '';
  return prefix + formatMoney(Math.abs(diff));
}

function sleep(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 准备分享数据
function prepareShare() {
  if (results.value.length === 0) return;
  
  const times = selectedTimes.value;
  const totalMoney = formatMoney(totalAmountB.value);
  const winRateValue = winRate.value;
  
  // 生成吸引人的分享文案
  let shareTitle = '';
  
  if (times === 1) {
    // 单次抽奖
    if (results.value[0]?.win) {
      shareTitle = `🎊 天选之人！一次性获得2亿元，你敢挑战吗？`;
    } else {
      shareTitle = `😱 抽到了那1%...与2亿擦肩而过，你的运气会更好吗？`;
    }
  } else {
    // 多次抽奖
    if (totalAmountB.value > totalAmountA.value) {
      shareTitle = `🎉 ${times}次抽奖，总收益${totalMoney}，成功率${winRateValue}%`;
    } else {
      shareTitle = `😂 ${times}次抽奖，总收益${totalMoney}，成功率${winRateValue}%`;
    }
  }
  
  // 更新父组件的分享数据
  if (updateShareData) {
    updateShareData(shareTitle, '/pages/game');
  }
}
</script>

<style scoped>
.lottery-game {
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 20rpx;
  position: relative;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* 返回按钮样式 */
.back-button {
  position: fixed;
  top: 20rpx;
  left: 20rpx;
  display: flex;
  align-items: center;
  gap: 10rpx;
  padding: 16rpx 28rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 100rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
  z-index: 1000;
  transition: all 0.3s ease;
}

.back-button:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.back-icon {
  font-size: 36rpx;
  color: #45B05D;
  font-weight: bold;
  line-height: 1;
}

.back-text {
  font-size: 28rpx;
  color: #2c3e50;
  font-weight: 600;
}

/* 知乎链接样式 */
.zhihu-link-section {
  max-width: 100%;
  width: 100%;
  text-align: center;
  margin-bottom: 40rpx;
  margin-top: 40rpx;
  padding: 24rpx 20rpx;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  border-radius: 24rpx;
  box-shadow: 0 8rpx 30rpx rgba(238, 90, 36, 0.3);
  box-sizing: border-box;
}

.zhihu-link {
  color: white;
  font-size: 26rpx;
  font-weight: 600;
  line-height: 1.5;
  text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.2);
  display: block;
}

.container {
  max-width: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  padding: 40rpx 30rpx;
  border-radius: 40rpx;
  box-shadow: 0 20rpx 80rpx rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.title {
  display: block;
  font-size: 50rpx;
  color: #2c3e50;
  text-align: center;
  margin-bottom: 30rpx;
  font-weight: bold;
}

.game-intro {
  display: block;
  text-align: center;
  color: #7f8c8d;
  font-size: 28rpx;
  margin-bottom: 80rpx;
}

/* 用户名输入区样式 */
.username-section {
  margin-bottom: 60rpx;
  padding: 40rpx;
  background: linear-gradient(135deg, #f0f4f8, #e3eaf2);
  border-radius: 24rpx;
  border: 2rpx solid rgba(69, 176, 93, 0.3);
}

.username-label {
  display: block;
  font-size: 30rpx;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 20rpx;
}

.username-input {
  width: 100%;
  height: 88rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  line-height: 88rpx;
  border: 2rpx solid #d1d9e6;
  border-radius: 16rpx;
  background: #ffffff;
  color: #2c3e50;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: all 0.3s ease;
}

.username-input:focus {
  border-color: #45B05D;
  background: #ffffff;
  box-shadow: 0 0 0 4rpx rgba(69, 176, 93, 0.1);
}

.username-input::placeholder {
  color: #95a5a6;
}

.username-hint {
  display: block;
  margin: 16rpx 0 0 0;
  font-size: 24rpx;
  color: #7f8c8d;
  font-style: italic;
  position: relative;
  z-index: 1;
}

/* 方案说明区域 */
.plan-section {
  margin-bottom: 80rpx;
}

.plan-comparison {
  display: flex;
  flex-direction: column;
  gap: 40rpx;
  align-items: center;
  margin-bottom: 40rpx;
}

.plan-card {
  width: 100%;
  padding: 50rpx;
  border-radius: 30rpx;
  text-align: center;
  border: 2rpx solid transparent;
}

.plan-card.safe {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  border-color: #4CAF50;
}

.plan-card.risky {
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  border-color: #ff9800;
}

.plan-icon {
  font-size: 50rpx;
  margin-bottom: 20rpx;
}

.plan-title {
  display: block;
  font-size: 32rpx;
  color: #2c3e50;
  margin-bottom: 20rpx;
  font-weight: 600;
}

.plan-rate {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #4CAF50;
  margin-bottom: 16rpx;
}

.plan-amount {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #e74c3c;
  margin-bottom: 16rpx;
}

.plan-fail {
  display: block;
  font-size: 26rpx;
  color: #95a5a6;
  margin-bottom: 16rpx;
}

.plan-expected {
  display: block;
  font-size: 26rpx;
  color: #7f8c8d;
  font-style: italic;
}

.vs-divider {
  font-size: 44rpx;
  font-weight: bold;
  color: #45B05D;
  text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.plan-note {
  text-align: center;
  padding: 30rpx;
  background: rgba(69, 176, 93, 0.1);
  border-radius: 20rpx;
  color: #45B05D;
  font-weight: 500;
  font-size: 28rpx;
}

.times-section {
  margin-bottom: 60rpx;
}

.times-buttons {
  display: flex;
  gap: 30rpx;
  justify-content: center;
  flex-wrap: wrap;
}

.times-btn {
  padding: 30rpx 60rpx;
  font-size: 28rpx;
  background: rgba(69, 176, 93, 0.1);
  color: #45B05D;
  border: 2rpx solid #45B05D;
  border-radius: 100rpx;
  text-align: center;
  font-weight: 600;
}

.times-btn.active {
  background: linear-gradient(135deg, #45B05D, #3D9E51);
  color: white;
  border-color: transparent;
  box-shadow: 0 8rpx 30rpx rgba(69, 176, 93, 0.3);
}

.times-btn.disabled {
  opacity: 0.6;
}

.running-section {
  padding: 80rpx 0;
  text-align: center;
}

.progress-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40rpx;
}

.spinner {
  width: 100rpx;
  height: 100rpx;
  border: 10rpx solid #f3f3f3;
  border-top: 10rpx solid #45B05D;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.progress-text {
  font-weight: 600;
  color: #45B05D;
}

.result-section {
  margin-top: 80rpx;
}

.single-result {
  text-align: center;
}

.result-card {
  padding: 80rpx;
  border-radius: 40rpx;
  margin-bottom: 60rpx;
}

.result-card.win {
  background: linear-gradient(135deg, #fff9c4, #ffe082);
  border: 3rpx solid #ffd54f;
  box-shadow: 0 0 60rpx rgba(255, 193, 7, 0.5);
}

.result-card.lose {
  background: linear-gradient(135deg, #e0e0e0, #bdbdbd);
  border: 3rpx solid #9e9e9e;
}

.result-icon {
  font-size: 80rpx;
  margin-bottom: 30rpx;
}

.result-status {
  display: block;
  font-size: 44rpx;
  margin-bottom: 30rpx;
  color: #2c3e50;
  font-weight: 600;
}

.result-amount {
  display: block;
  font-size: 50rpx;
  font-weight: bold;
  color: #e74c3c;
  margin-bottom: 30rpx;
}

.result-desc {
  display: block;
  font-size: 28rpx;
  color: #7f8c8d;
}

/* 对比框 */
.comparison-box {
  background: white;
  padding: 60rpx;
  border-radius: 30rpx;
  margin-bottom: 60rpx;
  border: 2rpx solid #dee2e6;
}

.comparison-title {
  display: block;
  font-size: 36rpx;
  color: #2c3e50;
  margin-bottom: 40rpx;
  text-align: center;
  font-weight: 600;
}

.comparison-grid {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.comparison-item {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 20rpx;
  font-size: 28rpx;
}

.comparison-item.highlight {
  background: linear-gradient(135deg, rgba(69, 176, 93, 0.1), rgba(61, 158, 81, 0.1));
  border: 2rpx solid #45B05D;
  font-weight: 600;
}

.label {
  color: #7f8c8d;
  font-weight: 500;
}

.value {
  font-weight: bold;
  color: #2c3e50;
}

.value.safe {
  color: #4CAF50;
}

.value.risky-win {
  color: #ff9800;
}

.value.risky-lose {
  color: #e74c3c;
}

.value.positive {
  color: #4CAF50;
}

.value.negative {
  color: #e74c3c;
}

.comparison-conclusion {
  margin-top: 40rpx;
  padding: 40rpx;
  border-radius: 20rpx;
  text-align: center;
}

.conclusion-text {
  display: block;
  font-size: 32rpx;
  margin: 0;
  font-weight: 600;
}

.conclusion-text.win {
  color: #4CAF50;
  background: rgba(76, 175, 80, 0.1);
  padding: 30rpx;
  border-radius: 20rpx;
}

.conclusion-text.lose {
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
  padding: 30rpx;
  border-radius: 20rpx;
}

.strong {
  font-weight: bold;
}

.stats-panel {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40rpx;
  margin-bottom: 60rpx;
}

.stat-card {
  padding: 50rpx;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 30rpx;
  text-align: center;
  border: 2rpx solid #dee2e6;
}

.stat-card.total {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #fff9c4, #ffe082);
  border-color: #ffd54f;
}

.stat-label {
  display: block;
  font-size: 26rpx;
  color: #7f8c8d;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.stat-value {
  display: block;
  font-size: 44rpx;
  font-weight: bold;
  color: #2c3e50;
}

.stat-value.gold {
  font-size: 50rpx;
  color: #f39c12;
}

.stat-value.success {
  color: #4CAF50;
}

.stat-value.lose {
  color: #e74c3c;
}

/* 分享功能样式 */
.share-section {
  margin-top: 60rpx;
  text-align: center;
}

.share-btn {
  width: 100%;
  max-width: 800rpx;
  padding: 30rpx 50rpx;
  font-size: 30rpx;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-radius: 100rpx;
  text-align: center;
  box-shadow: 0 8rpx 30rpx rgba(245, 87, 108, 0.3);
  margin: 0 auto;
  border: none;
  line-height: normal;
}

.share-btn::after {
  border: none;
}

/* 排行榜样式 */
.ranking-section {
  margin-top: 80rpx;
  padding: 22rpx;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 30rpx;
  border: 2rpx solid #dee2e6;
}

.ranking-title {
  display: block;
  font-size: 44rpx;
  color: #2c3e50;
  text-align: center;
  margin-bottom: 20rpx;
  font-weight: bold;
}

.ranking-subtitle {
  display: block;
  text-align: center;
  color: #7f8c8d;
  font-size: 26rpx;
  margin-bottom: 50rpx;
}

.ranking-empty {
  text-align: center;
  padding: 80rpx 40rpx;
  color: #95a5a6;
  font-size: 30rpx;
}

.ranking-table-wrapper {
  border-radius: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.ranking-table {
  width: 100%;
  background: white;
  font-size: 20rpx;
}

.ranking-header {
  display: flex;
  background: linear-gradient(135deg, #45B05D, #3D9E51);
  color: white !important;
  padding: 20rpx 10rpx;
  font-weight: 600;
  font-size: 20rpx;
  align-items: center;
}

.ranking-header .rank-col,
.ranking-header .name-col,
.ranking-header .amount-col,
.ranking-header .win-col,
.ranking-header .date-col {
  color: white !important;
}

.ranking-row {
  display: flex;
  padding: 16rpx 10rpx;
  border-bottom: 1rpx solid #f0f0f0;
  align-items: center;
}

.ranking-row.top-three {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), rgba(255, 223, 0, 0.1));
}

.rank-col {
  width: 15%;
  text-align: center;
  flex-shrink: 0;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  font-weight: bold;
  font-size: 22rpx;
}

.rank-badge.rank-first {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  color: #d35400;
  box-shadow: 0 4rpx 16rpx rgba(255, 215, 0, 0.4);
}

.rank-badge.rank-second {
  background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
  color: #555;
  box-shadow: 0 4rpx 16rpx rgba(192, 192, 192, 0.4);
}

.rank-badge.rank-third {
  background: linear-gradient(135deg, #cd7f32, #e6a567);
  color: white;
  box-shadow: 0 4rpx 16rpx rgba(205, 127, 50, 0.4);
}

.name-col {
  width: 14%;
  font-weight: 600;
  color: #2c3e50;
  flex-shrink: 0;
  white-space: normal;
  word-break: keep-all;
  word-wrap: break-word;
  font-size: 20rpx;
  line-height: 1.4;
  max-width: 14%;
}

.amount-col {
  width: 29%;
  color: #2c3e50;
  font-weight: 600;
  font-size: 19rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.win-col {
  width: 22%;
  text-align: center;
  flex-shrink: 0;
  font-size: 19rpx;
}

.win-count {
  color: #2c3e50;
  font-weight: 600;
}

.separator {
  margin: 0 4rpx;
  color: #95a5a6;
}

.lose-count {
  color: #2c3e50;
  font-weight: 600;
}

.date-col {
  width: 20%;
  color: #2c3e50;
  font-size: 18rpx;
  flex-shrink: 0;
  text-align: right;
}

/* 底部作者信息样式 */
.author-footer {
  width: 100%;
  text-align: center;
  padding: 40rpx;
  margin-top: 60rpx;
}

.official-account-link {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  display: inline-block;
}
</style>

